<template>
	<el-card class="course_item" shadow="hover">
		<el-image slot="header" :src="courseCover" fit="cover"></el-image>
		<h4>{{ data.title }}</h4>
		<p>建设单位：{{ data.extFiled2 }}</p>
		<span class="el-icon-date">{{ data.createTime }}</span>
	</el-card>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	computed: {
		...mapGetters(['siteInfo']),
		courseCover() {
			let httpUrl = this.data?.sysAttachment?.httpUrl;
			if (!!httpUrl) {
				return httpUrl.replaceIP();
			} else if (!!this.siteInfo.defaultCourseImg) {
				return this.siteInfo.defaultCourseImg;
			} else {
				return require('@/assets/img/course-cover.jpg');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.el-card.course_item::v-deep {
	cursor: pointer;
	.el-card__header {
		position: relative;
		padding: 56.25% 0 0;
		.el-image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.el-image img {
			transition: transform 0.3s ease-in-out;
			&:hover {
				transform: scale(1.1);
			}
		}
	}
	.el-card__body {
		padding: 16px;
		line-height: 1;
		h4 {
			font-size: 18px;
			font-weight: normal;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		p {
			color: #606266;
			margin: 16px 0;
		}
		span.el-icon-date {
			color: #909399;
			&::before {
				margin-right: 6px;
			}
		}
	}
	&:hover {
		transform: translateY(-6px);
		.el-card__body {
			h4 {
				color: var(--primary-hover);
			}
		}
	}
}
</style>
